<template>
  <div class="hello">
    <div class="lable">
      <div class="table_box">
        <el-table :data="table_data" stripe style="width: 100%">
          <el-table-column
            v-for="(item,index) in table_prop"
            :key="index"
            align="center"
            :prop="item.prop"
            :label="item.lable"
          ></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="editRow(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="json">
      <div class="line_feed">
        <el-button size="mini" type="primary" @click="copy('json')">Copy</el-button>
        <el-button size="mini" type="primary" @click="clear">Clear</el-button>
        <el-button size="mini" type="primary" @click=" addField">Add</el-button>
        <el-button size="mini" type="primary" @click="save">Save</el-button>
      </div>
      <div style="margin-top:40px">
        <Pre v-if="line_feed">
          <Code id="code" contenteditable="true">{{JSON.stringify(table_data,null,4)}}</Code>
        </Pre>
        <input class="row" id="json" :value="JSON.stringify(table_data)" />
      </div>
    </div>

    <el-dialog title="工作流自定义字段" :visible.sync="is_show_add">
      <h4>字段属性: 额外添加,子表单loonflow不自动添加field_attribute,默认(可选)</h4>
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="字段标识" :label-width="formLabel_width" prop="field_key">
          <el-input style="width:500px" v-model="form.field_key"></el-input>
        </el-form-item>
        <el-form-item label="字段名称" :label-width="formLabel_width" prop="field_name">
          <el-input style="width:500px" v-model="form.field_name"></el-input>
        </el-form-item>
        <el-form-item label="字段描述" :label-width="formLabel_width">
          <el-input style="width:500px" v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="字段类型" :label-width="formLabel_width" prop="field_type_id">
          <el-select v-model="form.field_type_id" placeholder="请选择字段类型">
            <el-option
              v-for="item in select_option"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="顺序ID" :label-width="formLabel_width">
          <el-input style="width:500px" v-model="form.order_id"></el-input>
        </el-form-item>
        <el-form-item label="默认值" :label-width="formLabel_width">
          <el-input style="width:500px" v-model="form.default_value"></el-input>
        </el-form-item>
        <el-form-item label="布尔显示定义" :label-width="formLabel_width">
          <el-input style="width:500px" v-model="form.boolean_field_display"></el-input>
        </el-form-item>
        <el-form-item label="选项" :label-width="formLabel_width">
          <el-input style="width:500px" v-model="form.field_choice"></el-input>
        </el-form-item>
        <el-form-item label="标签" :label-width="formLabel_width">
          <el-input style="width:500px" v-model="form.label"></el-input>
        </el-form-item>
        <el-form-item label="模板" :label-width="formLabel_width">
          <el-input style="width:500px" v-model="form.field_template"></el-input>
        </el-form-item>
        <el-form-item label="字段属性" :label-width="formLabel_width">
          <el-select v-model="form.field_attribute" placeholder="请选择字段属性">
            <el-option
              v-for="item in field_attribute"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="is_show_add = false">取 消</el-button>
        <el-button type="primary" @click="fieldSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      line_feed: true,
      table_data: [],
      table_prop: [
        { prop: "field_key", lable: "字段标识" },
        { prop: "field_name", lable: "字段名称" },
        { prop: "order_id", lable: "顺序ID" },
        { prop: "field_type_id", lable: "字段类型" }
      ],
      is_show_add: false,
      form: {
        field_key: "",
        field_name: "",
        field_value: null,
        order_id: 0,
        field_type_id: null,
        field_attribute: 3,
        default_value: "",
        description: "",
        field_template: "{}",
        boolean_field_display: "",
        field_choice: "{}",
        label: "{}"
      },
      formLabel_width: "120px",
      rules: {
        field_key: [
          { required: true, message: "请输入字段标识", trigger: "blur" }
        ],
        field_name: [
          { required: true, message: "请输入字段名称", trigger: "blur" }
        ],
        field_type_id: [
          { required: true, message: "请输入字段类型", trigger: "blur" }
        ]
      },
      select_option: [
        { lable: "字符串", value: 5 },
        { lable: "整型", value: 10 },
        { lable: "浮点型", value: 15 },
        { lable: "单选框", value: 35 },
        { lable: "下拉单选", value: 45 },
        { lable: "多选框", value: 40 },
        { lable: "多选下拉框", value: 50 },
        { lable: "日期时间类型", value: 30 },
        { lable: "日期类型", value: 25 },
        { lable: "文本域", value: 55 },
        { lable: "布尔型", value: 20 },
        { lable: "用户选择", value: 60 },
        { lable: "多用户选择", value: 70 },
        { lable: "附件选择", value: 80 }
      ],
      field_attribute: [
        { lable: "只读", value: 1 },
        { lable: "必填", value: 2 },
        { lable: "可选", value: 3 }
      ],
      edit_idex: {
        edit: false,
        index: null
      }
    };
  },
  methods: {
    // json copy
    copy(element_id) {
      let el = document.getElementById(element_id);
      el.select();
      document.execCommand("Copy");
      this.$message({
        message: "Copy success",
        type: "success"
      });
    },
    // json save
    save() {
      let code = document.getElementById("code").innerText;
      try {
        this.table_data = JSON.parse(code);
      } catch (err) {
        this.$message.error("JSON formal error");
      }
    },
    // json clear
    clear() {
      this.table_data = [];
      this.line_feed = false;
      this.$nextTick(() => {
        this.line_feed = true;
      });
    },
    // field add
    addField() {
      this.edit_idex = {
        edit: false,
        index: null
      };
      this.is_show_add = true;
      this.form = {
        field_key: "",
        field_name: "",
        field_value: null,
        order_id: 0,
        field_type_id: null,
        field_attribute: 3,
        default_value: "",
        description: "",
        field_template: "{}",
        boolean_field_display: "",
        field_choice: "{}",
        label: "{}"
      };
    },
    // field save
    fieldSave() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          console.log("error submit!!");
          return false;
        }
        if (this.edit_idex.edit) {
          this.$set(this.table_data, this.edit_idex.index, this.form);
        } else {
          this.table_data.push(this.form);
        }
        this.is_show_add = false;
        this.form = {
          field_key: "",
          field_name: "",
          field_value: null,
          order_id: 0,
          field_type_id: null,
          field_attribute: 3,
          default_value: "",
          description: "",
          field_template: "{}",
          boolean_field_display: "",
          field_choice: "{}",
          label: "{}"
        };
        this.edit_idex = {
          edit: false,
          index: null
        };
      });
    },
    // field edit
    editRow(index, row) {
      this.form = row;
      this.is_show_add = true;
      this.edit_idex = {
        edit: true,
        index: index
      };
    },
    // field delete
    deleteRow(index, row) {
      this.table_data.splice(index, 1);
      this.line_feed = false;
      this.$nextTick(() => {
        this.line_feed = true;
      });
    }
  }
};
</script>

<style>
.el-dialog {
  margin: 10px auto !important;
}
.hello {
  height: 100%;
  display: flex;
}
.lable {
  flex: 1;
}
.json {
  padding-top: 40px;
  width: 500px;
  height: 100%;
  padding: 8px;
  background-color: #333;
  color: rgb(230, 99, 11);
  word-break: break-all;
  word-wrap: break-word;
  font-size: 12px;
}
.json .row {
  opacity: 0;
}
.line_feed {
  height: 40px;
  float: right;
}
#code {
  color: rgb(230, 99, 11);
}
</style>
